<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box"></div>
    <img id="image" src="https://woniuimage.oss-cn.png" alt="加载失败" class="avatar">
    <input id="input" type="text">
    <label for=""></label>

    <script>
        const imageEle = document.querySelector('#image');
        const inputEle = document.querySelector('#input');
        const boxEle = document.querySelector('#box');

        // 获取
        console.log(imageEle.src);
        console.log(imageEle.getAttribute("src"));

        // 添加、修改
        inputEle.type = "checkbox";
        inputEle.setAttribute("type", "checkbox")

        // 删除
        // imageEle.alt = '';
        imageEle.removeAttribute('alt');

        // 判断有没有
        // console.log(imageEle.hasAttribute('alt'));

        if (imageEle.hasAttribute('alt')) {
            console.log("有alt属性");
        } else {
            console.log("没有alt属性");
        }

        if (imageEle.alt) {
            console.log("有alt属性");
        } else {
            console.log("没有alt属性");
        }

        // boxEle.style = "width: 100px; height: 100px; background-color: red";

        // boxEle.style.width = "100px";
        // boxEle.style.height = "100px";
        // boxEle.style.backgroundColor = "green";


        // // 查询属性值
        // console.log(inputEle.value);
        // // 添加属性
        // inputEle.value = "hello";
        // // 修改属性
        // imageEle.src = "https://woniuimage.oss-cn-hangzhou.aliyuncs.com/woniuimage/online/course/icon/20220222/5e1bc14bcc8b4ea493e953c4d8c2c39c.png";
        // // 删除属性
        // inputEle.value = '';

        // 特殊属性：
        // class在JS中需要替换成className
        // label标签上的for属性，在JS中需要替换成htmlFor
        // console.log(imageEle.className);
    </script>
</body>

</html>